import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import Field from "@/components/Field";
import { Picker, Popup } from "vant";
import { IFormItem, IFormTypeData } from "../../types";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  name: "select-view",
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    item: {
      type: Object as () => IFormItem,
      default: () => {
        return {};
      },
    },
    typeData: {
      type: Array as () => IFormTypeData[],
      default: () => [],
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const showModal = ref(false);
    return () => {
      function renderModal() {
        return (
          <Popup
            v-model:show={showModal.value}
            round={true}
            position="bottom"
            style={{ padding: getSize(15), paddingTop: 0 }}
          >
            <Picker
              onConfirm={(data) => {
                emit("change", data.selectedValues[0]);
                showModal.value = false;
              }}
              onCancel={() => (showModal.value = false)}
              columns={props.typeData?.map((e) => {
                return {
                  text: e.label,
                  value: e.value,
                };
              })}
              class={style.picker}
            />
          </Popup>
        );
      }
      const getValueName = () => {
        const find = props.typeData.find((e) => e.value == props.modelValue);
        if (find) {
          return find.label;
        } else {
          return "";
        }
      };
      return (
        <div>
          <Field
            name={getValueName()}
            onClick={() => (showModal.value = true)}
            isLink={true}
          />
          {renderModal()}
        </div>
      );
    };
  },
});
